<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
  <script src="../../lib/vue.js"></script>
  <!-- <script src="../../lib/vue.min.js"></script> -->
  <link rel="stylesheet"
    href="../../lib/vant@2.12.54_lib_index.css">
  <link rel="stylesheet"
    href="../../styles/vant.css" />
  <script src="../../lib/vant@2.12.54_lib_vant.min.js"></script>
  <script src="../../lib/axios-0.18.0.js"></script>
  <script src="../../http/request.js"></script>
  <script src="../../utils/fileCompress.js"></script>
  <script src="../../utils/toFormData.js"></script>
  <script src="../../utils/dateFormat.js"></script>
  <script src="../../areaList/areaList.js"></script>
  <script src="../../areaList/activeAreaList.js"></script>
  <title>代跑跑</title>
  <style>
    .main {
      overflow: scroll;
      height: 85vh;
    }

    .van-tabbar-item__icon {
      font-size: 30px;
    }

    .van-uploader__wrapper {
      flex-wrap: wrap;
    }

    .van-cell.overflow-visible {
      overflow: visible;
      height: 0;
    }

    .van-uploader__upload {
      bottom: 90px;
      left: 0;
    }

    .van-coupon__condition {
      display: none;
    }

    .van-coupon__amount {
      color: var(--van-primary);
    }

    .van-coupon-list__bottom .van-button--danger {
      background-color: var(--van-primary);
      border: 1px solid var(--van-primary);
    }

    .van-coupon-list__list {
      height: calc(60vh - 48px) !important;
    }

    .van-dialog__confirm,
    .van-dialog__confirm:active {
      color: var(--van-primary);
    }

    .description-box .van-cell {
      margin-top: 0;
      padding-top: 0;
    }

    .van-stepper--round .van-stepper__plus {
      background-color: var(--van-primary);
    }

    .van-stepper--round .van-stepper__minus {
      color: var(--van-primary);
      border: 1px solid var(--van-primary);
    }

    .van-stepper__input {
      font-size: 16px;
    }

    .amount__containter .van-field__control--custom {
      justify-content: flex-end;
    }

    .description-box-mark .van-cell__label {
      color: red;
    }
  </style>
</head>

<body>
  <div id="app">
    <van-nav-bar title="下单"></van-nav-bar>
    <div class="main">
      <van-form @submit="onSubmit">
        <van-cell-group title="地址信息"
          inset>

          <!-- 联系电话 -->
          <van-field v-model="phone"
            type="number"
            required
            name="phone"
            label="联系电话："
            placeholder="请输入电话号码"
            :rules="[{ validator:validatorForPhone, required: true, message: '请输入正确的国内电话号码' }]"></van-field>

          <!-- 送达地址 -->
          <van-field readonly
            clickable
            required
            name="address"
            :value="address"
            label="送达地址："
            placeholder="点击选择送达地址"
            @click="isShowAddressList = true"
            :rules="[{ required: true, message: '请选择送达地址' }]"></van-field>

          <!-- 送达地址弹出层 -->
          <van-popup v-model="isShowAddressList"
            round
            position="bottom">
            <van-tabs v-model="areaList">
              <van-tab title="静园">
                <van-area title="静园"
                  :area-list="JingYuanAreaList"
                  @confirm="getAddress"
                  @cancel="isShowAddressList = false"></van-area>
              </van-tab>
              <van-tab title="怡园">
                <van-area title="怡园"
                  :area-list="YiYuanAreaList"
                  @confirm="getAddress"
                  @cancel="isShowAddressList = false"></van-area>
              </van-tab>
              <!-- <van-tab title="教学楼">
                <van-area title="教学楼" :area-list="TeachingBuildingAreaList" @confirm="getAddress"
                  @cancel="isShowAddressList = false"></van-area>
              </van-tab>
              <van-tab title="其他">
                <van-area title="其他" :area-list="OtherAreaList" @confirm="getAddress"
                  @cancel="isShowAddressList = false"></van-area>
              </van-tab> -->
            </van-tabs>
          </van-popup>

        </van-cell-group>

        <van-cell-group inset
          title="取件信息">
          <!-- 取件信息 -->
          <van-field v-model="packageInfo"
            required
            rows="4"
            name="packageInfo"
            :border="false"
            autosize
            label="取件信息："
            type="textarea"
            maxlength="100"
            placeholder="请粘贴取件信息或上传图片"
            show-word-limit
            :rules="[{ validator:validatorForPackageInfo, message: '请粘贴取件信息或上传取件图片' }]"></van-field>

          <!-- 取件图片集 -->
          <van-field name="images"
            class="overflow-visible"
            :border="false">
            <template #input>
              <van-uploader v-model="images"
                :max-count="maxCount"
                :multiple="true"
                accept="image/*"></van-uploader>
            </template>
          </van-field>

          <!-- 快递件数 -->
          <van-field class="amount__containter"
            name="count"
            label="快递件数："
            readonly>
            <template #input>
              <van-stepper v-model="count"
                min="1"
                max="5"
                input-width="60px"
                button-size="24px"
                step="1"
                theme="round"></van-stepper>
            </template>
          </van-field>

          <!-- 备注 -->
          <van-field v-model="remark"
            name="remark"
            label="备注："
            placeholder="请输入备注信息"></van-field>

          <div class="description-box-mark">
            <van-cell label="物流公司为顺丰，或取件码为88开头的快递，请备注姓名和手机尾号"
              title="">
            </van-cell>
          </div>

          <!-- 悬赏金额 -->
          <van-field class="amount__containter"
            :border="false"
            name="amount"
            label="悬赏："
            readonly>
            <template #input>
              <van-stepper v-model="amount"
                min="5.00"
                max="99.00"
                input-width="60px"
                button-size="24px"
                step="0.50"
                theme="round"
                :decimal-length="2"></van-stepper>
            </template>
          </van-field>

          <div class="description-box">
            <van-cell label="加急单请根据紧急状况自行加价，默认尽快送达"
              title="">
            </van-cell>
          </div>

        </van-cell-group>

        <!-- 提交按钮 -->
        <div style="margin: 16px;">
          <van-button round
            block
            :loading="isLoading"
            type="primary"
            native-type="submit">
            帮我取
          </van-button>
        </div>

      </van-form>

    </div>

    <!-- 底层标签页 -->
    <van-tabbar class="tabbar"
      v-model="active"
      @change="onChange">
      <van-tabbar-item icon="wap-home"
        name="home">主页</van-tabbar-item>
      <van-tabbar-item icon="shop"
        name="information">商家</van-tabbar-item>
      <van-tabbar-item icon="thumb-circle"
        name="distribute">下单</van-tabbar-item>
      <van-tabbar-item icon="bars"
        name="order">订单</van-tabbar-item>
      <van-tabbar-item icon="manager"
        name="personalCenter">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</body>
<script>
  var APPID = "wx576478355cd34bb0"
  new Vue({
    el: "#app",
    data() {
      return {
        isPayVersion: true,// 是否开启支付版本
        isLoading: false, // 提交按钮是否禁用
        isUseDiscount: false, // 是否使用优惠
        phone: '', // 联系电话
        address: '', // 送达地址
        packageInfo: '', // 取件信息
        images: [], // 取件图片数组, 用于回显
        count: 1, // 快递件数
        remark: '', // 备注
        amount: 5.00, // 悬赏
        maxCount: 3, // 最大上传文件数
        isShowAddressList: false, // 控制展示地址选择的弹出层
        active: 'distribute', // 控制标签栏的显示
        areaList: '', // 一级地址                          
        JingYuanAreaList: JingYuanAreaList, // 静园地址列表
        YiYuanAreaList: YiYuanAreaList, // 怡园地址列表
        TeachingBuildingAreaList: TeachingBuildingAreaList, // 教学楼地址列表
        OtherAreaList: OtherAreaList, // 其他地址列表
      }
    },
    methods: {
      // 联系方式表单校验
      validatorForPhone(val) {
        return /^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(val)
      },
      // 取件信息表单校验
      validatorForPackageInfo() {
        return !!(this.images.length || this.packageInfo)
      },
      // 确认送达地址
      getAddress(values) {
        // 拼接要展示的地址
        this.address = values.filter((item) => !!item).map((item) => item.name).join('/')
        this.isShowAddressList = false
      },
      // Tabbar 跳转其他页面
      onChange(index) {
        if (index === 'home') {
          location.href = '../../home.html?flag=0'
        } else {
          location.href = `../../${index}.html`
        }
      },
      // 提交订单
      onSubmit(values) {
        this.$dialog.confirm({
          message: `请确认您的送达地址:<span style="color: #ff0000;">${this.address}</span>`,
        }).then(async () => {
          // 订单提交提示信息
          this.$notify({
            message: '订单提交中，请稍后~~',
            color: '#ffffff',
            background: '#ff976a',
            duration: 2000,
          })
          this.isLoading = true
          // 调用 toFormData 函数，将值存进 FormData 对象
          const formData = await toFormData(values)
          formData.append('expectTime', '加急订单，尽快送达')
          formData.append('productId', 7) // 增加商品类型 id
          formData.append('isUseDiscount', this.isUseDiscount)
          // 调用发单接口
          axios({
            method: 'POST',
            url: '/user/order/distribute',
            // 设置 请求头 formData 格式
            headers: {
              'Content-Type': 'multipart/form-data'
            },
            data: formData
          }).then(res => {
            if (res.code === 1) {
              if (this.isPayVersion) {
                // 支付版本
                const data = res.data
                if (typeof WeixinJSBridge == "undefined") {
                  if (document.addEventListener) {
                    document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady, false);
                  } else if (document.attachEvent) {
                    document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady);
                    document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady);
                  }
                } else {
                  WeixinJSBridge.invoke(
                    'getBrandWCPayRequest', {
                    "appId": APPID,  //公众号ID，由商户传入
                    "timeStamp": data.timeStamp, //时间戳，自1970年以来的秒数
                    "nonceStr": data.nonceStr, //随机串
                    "package": data.prepayId,
                    "signType": "RSA", //微信签名方式：
                    "paySign": data.paySign //微信签名
                  }, (res) => {
                    if (res.err_msg === "get_brand_wcpay_request:ok") {
                      // 使用以上方式判断前端返回,微信团队郑重提示：
                      //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                      this.$notify({
                        message: '订单支付成功,将在2秒后跳转至订单~~',
                        color: '#ffffff',
                        background: '#2ED0DF',
                        duration: 2000,
                      })
                      setTimeout(() => {
                        location.href = `../../order.html`
                      }, 2000)
                    } else {
                      this.$notify({
                        message: '订单支付失败,请重新下单，如有疑问请添加客服解决~~',
                        color: '#ffffff',
                        background: '#ee0a24',
                        duration: 2000,
                      })
                      this.isLoading = false
                    }
                  }
                  )
                }
              } else {
                // 非支付版本
                this.$notify({
                  message: '订单支付成功,将在2秒后跳转至订单~~',
                  color: '#ffffff',
                  background: '#2ED0DF',
                  duration: 2000,
                })
                setTimeout(() => {
                  location.href = `../../order.html`
                }, 2000)
              }
            }
          })
        }).catch(() => {
        })
      },
    },
    async mounted() {
      const res = await axios({ method: 'GET', url: '/user/user/getDA' })
      this.phone = res.data.phone ? res.data.phone : ''
      if (res.data.address) {
        const firstAddress = res.data.address.slice(0, 2)
        if (firstAddress !== '静园' && firstAddress !== '怡园') {
          this.address = ''
        } else {
          this.address = res.data.address
        }
      }
    },
    watch: {
      // 这里强行改的图片上传图标位置，最好不要乱动  蛆:liuwy
      images(newVal, oldVal) {
        const newImagesLength = newVal.length
        const oldImagesLength = oldVal.length
        if (newImagesLength > 0) {
          const imageDiv = document.querySelector('.van-cell.overflow-visible')
          imageDiv.style.height = '100px'
        } else {
          const imageDiv = document.querySelector('.van-cell.overflow-visible')
          imageDiv.style.height = '0px'
        }
        if (newImagesLength < this.maxCount && oldImagesLength !== this.maxCount) {
          const uploader = document.querySelector('.van-uploader__upload')
          uploader.style.left = '0px'
          setTimeout(() => {
            const uploader = document.querySelector('.van-uploader__upload')
            uploader.style.left = `${-88 * newImagesLength}px`
          }, 1)
        } else if (newImagesLength < this.maxCount && oldImagesLength === this.maxCount) {
          setTimeout(() => {
            const uploader = document.querySelector('.van-uploader__upload')
            uploader.style.left = `${-88 * newImagesLength}px`
          }, 1)
        } else if (newImagesLength === this.maxCount) {
          setTimeout(() => {
            const preview = document.querySelector('.van-uploader__preview:last-child')
            preview.style.left = '0px'
          }, 1)
        }
      },
    },
  })

</script>

</html>